<template>
  <div v-if=this.showIt >

    <van-row>
      <van-col span="20">
        <van-cell-group inset>
          <van-cell @click="playIt()">
          <!-- <h1>播放列表</h1> -->
            <van-row>
            <van-col span="5">
                <!--cd图片 圆形图片 -->
                <van-image
                  round
                  width="3rem"
                  height="3rem"
                  :src="this.MusicIcon"
                  />   
                  
              </van-col>
              <van-col span="19">
                <div style="display:flex; align-items: center; justify-content: flex-start;">
                  <h4>歌名: {{this.MusicName}}</h4>-<label>作者: {{this.MusicAuthor}}</label>
                </div>
              
              </van-col>
            </van-row>
          </van-cell>
          </van-cell-group>
      </van-col>
      
      <van-col span="4">
      <!--删除按钮 -->

        <van-button  @click="deleteIt()" icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%88%A0%E9%99%A4%20%282%29.png" round size="small"> 删除</van-button>

      </van-col>
    </van-row>


  </div>
</template>

<script>
import { Toast } from 'vant'
import PlayListAPI from '@/api/PlayListAPI'
import CollectAPI from '@/api/CollectAPI'
export default {
name: "page2CollectmusicList",

created(){
  this.showIt = true
},

data() {
  return {
    pageUrl: '',
    tbCollect:{
      id:"",
      collectId:"",
      musicId:"",
      showIt: true,
    }
  }
},

methods:{
    playIt(){
      this.$bus.$emit("playUrl",this.MusicUrl)
    },
    deleteIt(){
     var result = CollectAPI.DeleteMusic2Collect(this.tbCollect)
     // 获取返回结果
    
      result.then((val)=>{
        // console.log(val)
        if(val.success){
          this.$toast("删除成功")
      // 将数据存到list里面
          // this.list=val.data
          //  this.$router.go(0)
          this.showIt=false
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },


},

mounted(){
  this.pageUrl = this.MusicUrl
  this.tbCollect.collectId=this.ItCollectId
  this.tbCollect.musicId=this.ItMusicId
},
  props: {
        // 音乐的 id
    // 为啥在这里要封装一个 id 属性呢？
    // 原因:将来,子组件中商品的勾选状态变化之后, 需要通过子 -> 父的形式,
    // 通知父组件根据 id 修改对应商品的勾选状态。
    Id: {
      required: true,
      type: String
    },
    ItCollectId: {
      required: true,
      type: String
    },
    ItMusicId: {
      required: true,
      type: String
    },
    MusicName: {
      required: true,
      type: String
    },
    MusicAuthor: {
      required: true,
      type: String
    },
    MusicUrl: {
      required: true,
      type: String
    },
    MusicIcon: {
      required: true,
      type: String
    }
    
    }

  }


</script>

<style lang="less">

</style>